<template>
	<up-navbar>
		<template #left>
			<up-tabs :list="tabsList" @click="tabsClick" lineHeight="0" :activeStyle="{
            color: '#000000',
            fontWeight: 'bold',
			fontSize: '18px',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#C7C7C7',
            transform: 'scale(1)'
        }"></up-tabs>
		</template>
	</up-navbar>
	<view :style="{
		marginTop: bottom + 16 + 'px',
		padding: '0 26px'
	}">
		<up-search bgColor="#F7F7F7" disabled placeholder="大家都在搜 王氏大闸蟹" :showAction="false" shape="square"
			v-if="current==0" height="44" @click="toSearch"></up-search>
		<up-search bgColor="#F7F7F7" placeholder="大家都在搜 王氏大闸蟹" v-else :showAction="false" v-model="name" shape="square"
			height="44" @change="searchBrand"></up-search>
		<block v-if="current === 0">
			<view class="sort-box">
				<view class="left">
					<view class="menu-item" :class="{ 'active': !menued}" @click="hotClick(0)">热门</view>
					<block v-for="menu in menuList " :key="menu.id">
						<view class="menu-item" :class="{ 'active': menued == menu.id }" @click="menuClick(menu)">
							{{ menu.name }}
						</view>
					</block>
				</view>
				<view class="right">
					<view class="goods-item" v-for="goods in goodsList" :key="goods.id" @click="toGoodsInfo(goods.id)">
						<image class="img" :src="goods.images" mode="widthFix"></image>
						<view class="name">{{goods.name}}</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else="current === 1">
			<view class="brand-box">
				<block v-for="brand in brandList " :key="brand.id">
					<BrandItem :brand="brand" />
				</block>
			</view>
		</block>
	</view>
</template>

<script setup>
	import BrandItem from '@/components/BrandItem.vue';
	import CategoryApi from '@/api/category.js'
	import {
		ref
	} from 'vue';
	const current = ref(0)
	const tabsList = [{
		name: '品类'
	}, {
		name: '品牌'
	}]
	const menuList = ref([])
	const name = ref('')
	const menued = ref()
	const hotGoodsList = ref([])
	const goodsList = ref([])
	const brandList = ref([])
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const menuClick = (menu) => {
		menued.value = menu.id
		goodsList.value = []
		getGoodsList(menu.id)
	}
	const hotClick = () => {
		menued.value = ''
		goodsList.value = hotGoodsList.value
	}
	const tabsClick = (e) => {
		current.value = e.index
	}
	const toGoodsInfo = (id) => {
		uni.navigateTo({
			url: '/subPackages/goods/info?id=' + id
		})
	}
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search'
		})
	}
	//获取分类列表
	const getCategoryList = () => {
		CategoryApi.getCategoryData().then(res => {
			menuList.value = res.data.categoryList
			hotGoodsList.value = res.data.hotGoodsList
			goodsList.value = res.data.hotGoodsList
			brandList.value = res.data.brandsList
		})
	}

	/**
	 * 根据分类id获取商品列表
	 */
	const getGoodsList = (id) => {
		CategoryApi.getGoodsByCategoryId(id).then(res => {
			goodsList.value = res.data
		})
	}

	function searchBrand() {
		CategoryApi.getBrandData(name.value).then(res => {
			brandList.value = res.data
		})
	}
	getCategoryList()
</script>

<style lang="scss" scoped>
	.sort-box {
		margin-top: 26px;
		display: flex;

		.left {
			width: 80px;

			.menu-item {
				line-height: 22px;
				font-size: 14px;
				color: #000000;
				margin-bottom: 36px;
				text-align: left;
				transition: all 0.3s ease-in-out;

				&.active {
					line-height: 26px;
					font-size: 16px;
					font-weight: bold;
					transform: scale(1.05);
				}

				&.active::after {
					content: '';
					display: block;
					width: 36px;
					height: 4px;
					background: linear-gradient(90deg, #000000 0%, #E8E8E8 100%);
					margin-top: 4px;
				}
			}
		}

		.right {
			flex: 1;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 24px;

			.goods-item {
				width: 100%;

				.img {
					width: 100%;
					height: auto;
				}

				&.active {
					animation: shake 0.5s ease-in-out;
					animation-iteration-count: 1;
				}


				@keyframes shake {
					0% {
						transform: scale(1);
					}

					25% {
						transform: scale(1.05);
					}

					50% {
						transform: scale(1);
					}

					75% {
						transform: scale(1.05);
					}

					100% {
						transform: scale(1);
					}

				}

				.name {
					font-size: 12px;
					color: #000000;
					text-align: center;
					margin-top: 8px;
				}
			}
		}

	}

	.brand-box {
		margin-top: 26px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 16px;
	}
</style>